<template>
  <div class="pagination">
    <el-pagination
      background
      :page-sizes="[5, 10, 20, 30, 40, 50, 60, 80, 100]"
      layout="prev, pager, next"
      :current-page.sync="currentPage1"
      :page-size="limit"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
export default {
  name: 'Pagination',
  props: {
    reset: {
      type: Number,
      required: false,
      default: 0
    },
    total: {
      type: Number,
      required: false,
      default: 0
    },
    limit: {
      type: Number,
      required: false,
      default: 10
    },
    currentPage: {
      type: Number,
      required: false,
      default: 1
    }
  },
  data() {
    return {
      currentPage1: this.currentPage
    }
  },
  watch: {
    currentPage(val) {
      // 改变这个值并不会触发 handleCurrentChange
      if (typeof val === 'number') {
        this.currentPage = val
      }
    }
  },
  methods: {
    // //当前页码改变
    //   currentPageChange(val) {
    //   this.currentPage = val
    //   this.$emit('currentPageChange', val)
    // },
    // 当前页变化
    handleCurrentChange(val) {
      this.currentPage1 = val
      this.$emit('handleCurrentChange', val)
    },
    // size变化
    handleSizeChange(val) {
      this.currentPage1 = 1
      this.$emit('handleSizeChange', val)
    }
  }
}
</script>

<style scoped>
  .pagination {
    margin: 20px 0;
    text-align: center;
  }
</style>
